<template>
	<view class="my-shop-wrapper">
		<!-- 自提点信息和业绩 -->
		<view class="shop-data">
			<view class="bg">
				<image src="/static/images/icon/my-shop-bg.png" />
			</view>
			<!-- 日/月业绩信息 -->
			<view class="achievement">
				<view class="data-table">
					<view class="data-line">
						<view class="data-block">
							<view class="data-tit">今日订单</view>
							<view class="data-cont">{{ sale.todayPrice }}</view>
						</view>
						<view class="data-block dividing">
							<view class="data-tit">昨日订单</view>
							<view class="data-cont">{{ sale.yesterdayPrice }}</view>
						</view>
						<view class="data-block">
							<view class="data-tit">月订单</view>
							<view class="data-cont">{{ sale.monthPrice }}</view>
						</view>
						<view class="data-block">
							<view class="data-tit">年订单</view>
							<view class="data-cont">{{ sale.yearPrice }}</view>
						</view>
					</view>
					<view class="data-line">
						<view class="data-block">
							<view class="data-tit">今日采购</view>
							<view class="data-cont">{{ purchase.todayPrice }}</view>
						</view>
						<view class="data-block dividing">
							<view class="data-tit">昨日采购</view>
							<view class="data-cont">{{ purchase.yesterdayPrice }}</view>
						</view>
						<view class="data-block">
							<view class="data-tit">月采购</view>
							<view class="data-cont">{{ purchase.monthPrice }}</view>
						</view>
						<view class="data-block">
							<view class="data-tit">年采购</view>
							<view class="data-cont">{{ purchase.yearPrice }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 常见应用 -->
		<view class="app-list">
			<!-- 应用项 -->
			<view class="app-row">
				<view class="app-item" @tap="goSale">
					<image src="/static/images/tabbar/sale1.png" />
					<view class="app-name">订单管理</view>
				</view>
				<view class="app-item" @tap="goPurchase">
					<image src="/static/images/tabbar/purchase1.png" />
					<view class="app-name">采购管理</view>
				</view>
				<view class="app-item" @tap="toStock">
					<image src="/static/images/tabbar/stock1.png" />
					<view class="app-name">仓库管理</view>
				</view>
				<view class="app-item" @tap="toFinance">
					<image src="/static/images/tabbar/finance1.png" />
					<view class="app-name">财务管理</view>
				</view>
			</view>
			<view class="app-row">
				<view class="app-item" @tap="toProduct">
					<image src="/static/images/tabbar/product1.png" />
					<view class="app-name">产品管理</view>
				</view>
				<view class="app-item" @tap="toCustomer">
					<image src="/static/images/tabbar/customer1.png" />
					<view class="app-name">客户管理</view>
				</view>
				<view class="app-item" @tap="toSupplier">
					<image src="/static/images/tabbar/supplier1.png" />
					<view class="app-name">供应商管理</view>
				</view>
				<view class="app-item">
					<image src="/static/images/tabbar/customer1.png" />
					<view class="app-name">潜在客户</view>
				</view>
			</view>
			<view class="app-row">
				<view class="app-item" @tap="toProduct">
					<image src="/static/images/tabbar/product1.png" />
					<view class="app-name">合同管理</view>
				</view>
				<view class="app-item" @tap="toCustomer">
					<image src="/static/images/tabbar/customer1.png" />
					<view class="app-name">联系人</view>
				</view>
				<view class="app-item" @tap="toSupplier">
					<image src="/static/images/tabbar/supplier1.png" />
					<view class="app-name">商机管理</view>
				</view>
				<view class="app-item">
					<image src="/static/images/tabbar/other1.png" />
					<view class="app-name">其他管理</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		saleCount,
		purchaseCount
	} from "@/api/erp/order.js";
	export default {
		data() {
			return {
				sale: {},
				purchase: {}
			}
		},
		methods: {
			/* 跳转到订单管理 */
			goSale() {
				uni.switchTab({
					url: '/pages/tabs/sale/index'
				});
			},
			/* 跳转到采购管理 */
			goPurchase() {
				uni.switchTab({
					url: '/pages/tabs/purchase/index'
				});
			},
			/* 跳转到客户管理 */
			toCustomer() {
				uni.switchTab({
					url: '/pages/tabs/customer/index'
				});
			},
			/* 跳转到仓库管理 */
			toStock() {
				uni.navigateTo({
					url: '/pages/erp/stock/index'
				});
			},
			/* 跳转到财务管理 */
			toFinance() {
				uni.navigateTo({
					url: '/pages/erp/finance/index'
				});
			},
			/* 跳转到产品管理 */
			toProduct() {
				uni.navigateTo({
					url: '/pages/erp/product/index'
				});
			},
			/* 跳转到供应商管理 */
			toSupplier() {
				uni.navigateTo({
					url: '/pages/erp/supplier/index'
				});
			},
			getSaleCount() {
				// console.log('获取到的产品ID:=====');
				saleCount().then((res) => {
					const sale = res.data;
					this.sale = sale;
				});
			},
			getPurchaseCount() {
				// console.log('获取到的产品ID:=====');
				purchaseCount().then((res) => {
					const purchase = res.data;
					this.purchase = purchase;
				});
			},
		},
		onLoad() {
			this.getSaleCount();
			this.getPurchaseCount();
		},
	}
</script>
<style scoped>
	/* 照片默认样式 */
	image {
		display: block;
		width: 100%;
		height: 100%;
	}

	.my-shop-wrapper {}

	/* 自提点信息or业绩 */
	.shop-data {
		width: 100%;
		min-height: 340rpx;
		color: #fff;
		padding-bottom: 20px;
	}

	.bg {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 260px;
		z-index: -1;

	}

	/* 业绩信息 */
	.achievement {
		margin-top: 80px;
		padding: 10px;
		font-size: 14px;
	}

	.a-title {
		display: flex;
		align-items: center;
	}

	.a-title .tit {
		font-size: 14px;
		padding-right: 30px;
	}

	.data-table {
		margin: 20px 0;
	}

	.data-line {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10px;
	}

	.data-block {
		text-align: center;
		flex: 1;
		margin-bottom: 5px;
	}

	.data-tit {
		font-size: 12px;
	}

	.data-cont {
		font-size: 15px;
		/* font-weight: bold; */
		margin-top: 5px;
	}

	/* 常用应用 */
	.commom-app {
		background-color: #fff;
		/* margin-top: 0px; */
	}

	.commom-tit {
		background-color: #fff;
		/* font-size: 14px;
		font-weight: bold;
		padding-bottom: 20px;
		border-bottom: 1px solid  #ffffff;
		margin: 0 15px;
		 */
	}

	.app-list {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #ffffff;
	}

	.app-row {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		width: 100%;
		margin-bottom: 20px;
	}

	.app-item {
		width: 22%;
		/* 每行显示 4 个应用 */
		text-align: center;
		font-size: 12px;
		margin-bottom: 15px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.app-item>image {
		width: 35px;
		/* 调整图标大小 */
		height: 35px;
		/* 调整图标大小 */
		margin-bottom: 6px;
		/* 调整图标与文字的间距 */
	}

	.app-name {
		font-size: 12px;
		/* 调整文字大小 */
		margin-top: 2px;
		/* 微调文字和图标之间的间距 */
	}

	/* 手机端适配 */
	@media (max-width: 768px) {
		.app-item {
			width: 22%;
			/* 每行显示 4 个应用 */
		}
	}

	@media (max-width: 480px) {
		.app-item {
			width: 22%;
			/* 保证每行4个应用 */
		}
	}
</style>